<!--
 * @Author: your name
 * @Date: 2021-12-25 16:26:38
 * @LastEditTime: 2022-01-01 22:30:34
 * @LastEditors: Please set LastEditors
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: \order-ui\src\pages\sys\user\Personal.vue
-->
<!--
  功能：功能描述
  作者：kangjie
  邮箱：kangjie@briup.com
  时间：2021年12月20日 15:20:59
  版本：v1.0
  修改记录：
  修改内容：
  修改人员：
  修改时间：
-->
<template>
  <div class="Personal">
    <!-- {{ user }} -->
    <!-- 头像 -->
    <div class="demo">
      <div class="demo1"><img :src="user.userFace" alt="" /></div>
      <div>
        <!-- 修改头像表单 -->
        <el-dialog title="修改头像" :visible.sync="dialogFormVisible">
          <el-form ref="productForm" :model="productForm" label-width="80px">
            <el-form-item label="选择头像" prop="photo">
              <!-- 上传图片并且显示缩略图 -->
              <el-upload
                class="avatar-uploader"
                :action="uploadFileURL"
                :show-file-list="false"
                :on-success="handleAvatarSuccess"
                :before-upload="beforeAvatarUpload"
              >
                <!-- 预览图片 -->
                <img
                  style="height: 100px"
                  v-if="imageUrl"
                  :src="imageUrl"
                  class="avatar"
                  
                />
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
              </el-upload>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="xgtx">确 定</el-button>
          </div>
        </el-dialog>
        <el-button @click="xgtx1" type="text"
          >修改头像</el-button
        >
      </div>
    </div>
    <el-container>
      <!-- 个人信息 -->
      <el-main>
        <div class="main1">
          <el-form ref="user" :model="user" label-width="80px">
            <!-- 姓名 -->
            <el-form-item label="姓名">
              {{ user.realname }}
            </el-form-item>
            <el-form-item label="性别" v-if="(user.gender = 'male')">
              男
            </el-form-item>
            <el-form-item label="性别" v-else> 女 </el-form-item>
            <el-form-item label="用户名">
              {{ user.username }}
            </el-form-item>
            <el-form-item label="状态" v-if="(user.status = '正常')">
              <el-tag type="success">{{ user.status }}</el-tag>
            </el-form-item>
            <el-form-item label="状态" v-else>
              <el-tag type="danger">{{ user.status }}</el-tag>
            </el-form-item>
          </el-form>
        </div>
        <div class="main2">
          <el-form ref="user" :model="user" label-width="80px">
            <!-- 姓名 -->
            <el-form-item label="手机号">
              {{ user.telephone }}
            </el-form-item>
            <el-form-item label="角色">
              {{ user.roles[0].name }}
            </el-form-item>
            <el-form-item label="注册时间">
              {{ moment(user.registerTime).format("YYYY-MM-DD HH:mm:ss") }}
            </el-form-item>
            <el-form-item label="出生日期">
              {{ moment(user.birth).format("YYYY-MM-DD ") }}
            </el-form-item>
          </el-form>
        </div>
        <!-- 修改个人信息 -->
        <div class="main3">
          <el-dialog
            :title="grxxTitle"
            :visible.sync="grxx"
            width="50%"
            :before-close="handleClose"
          >
            <!-- 表单开始 -->
            <!-- :model="productForm" 要传递的参数 -->
            <el-form
              :model="productForm"
              :rules="rules"
              ref="productForm"
              label-width="100px"
              class="demo-ruleForm"
            >
              <!-- 修改个人信息表单项 -->

              <el-form-item label="姓名" prop="realname">
                <el-input v-model="productForm.realname"></el-input>
              </el-form-item>

              <el-form-item label="用户名" prop="username">
                <el-input v-model="productForm.username"></el-input>
              </el-form-item>

              <el-form-item label="密码" prop="password">
                <el-input v-model="productForm.password"></el-input>
              </el-form-item>

              <!-- <el-form-item label="性别" prop="gender">
                <el-input v-model="productForm.gender"></el-input>
              </el-form-item> -->

              <el-form-item label="性别" prop="gender">
                <el-radio-group v-model="productForm.gender">
                  <el-radio label="male">男</el-radio>
                  <el-radio label="female">女</el-radio>
                </el-radio-group>
              </el-form-item>

              <el-form-item label="手机号" prop="telephone">
                <el-input v-model="productForm.telephone"></el-input>
              </el-form-item>

              <el-form-item label="出生日期">
                <el-col :span="11">
                  <el-date-picker
                    type="date"
                    placeholder="选择日期"
                    v-model="productForm.birth"
                    style="width: 100%"
                  ></el-date-picker>
                  <!-- {{ Date.parse(productForm.birth) }} -->
                </el-col>
              </el-form-item>

              <!-- 表单项结束 -->
            </el-form>
            <!-- /表单结束 -->

            <span slot="footer" class="dialog-footer">
              <el-button @click="handleClose">取 消</el-button>
              <el-button type="primary" @click="submitProductForm"
                >确 定</el-button
              >
            </span>
          </el-dialog>
          <!-- 修改个人信息按钮 -->
          <el-button @click="xggrxx" type="text">修改个人信息</el-button>
        </div>
      </el-main>

      <el-footer>
        <div>
          <el-button
            @click="exit"
            style="
              background-image: linear-gradient(to right, #7579ff, #bf73ff);
            "
            round
            >退出登录</el-button
          >
        </div>
      </el-footer>
    </el-container>
  </div>
</template>

<script>
import { mapMutations, mapActions, mapState } from "vuex";
import { get, post } from "@/utils/request";
var moment = require("moment");

export default {
  // 组件名称
  name: "demo",
  // 组件参数 接收来自父组件的数据
  props: {},
  // 组件状态值
  data() {
    return {
      showFileURL: "http://121.199.29.84:8888/group1/",
      // 项目基础路径和文件上传路径
      uploadFileURL: "http://121.199.29.84:8001/file/upload",
      // 图片上传预览
      imageUrl: "",
      // 个人信息
      grxx: false,
      // 个人信息表单名字
      grxxTitle: "",
      // 个人信息表单
      productForm: {
        // 名称
        realname: "",
        // 用户名
        username: "",
        // 密码
        password: "",
        // 性别
        gender: "",
        // 手机号
        telephone: "",
        // 注册时间
        registerTime: "",
        // 出生日期
        birth: "",
      },
      // 表单验证规则
      rules: {
        realname: [{ required: true, message: "请输入姓名", trigger: "blur" }],

        username: [
          { required: true, message: "请输入用户名", trigger: "blur" },
        ],

        password: [{ required: true, message: "请输入密码", trigger: "blur" }],

        gender: [{ required: true, message: "请输入性别", trigger: "blur" }],

        telephone: [
          { required: true, message: "请输入正确的手机号", trigger: "blur" },
          { min: 11, max: 11, message: "请输入正确的手机号", trigger: "blur" },
        ],
        registerTime: [
          { required: true, message: "请输入注册时间", trigger: "blur" },
        ],
        birth: [{ required: true, message: "请输入出生日期", trigger: "blur" }],
      },

      // 修改头像
      dialogFormVisible: false,
      productForm1: {
        // name: "",
        photo: "",
      },
    };
  },
  methods: {
    moment,
    ...mapMutations("user", ["login"]),
    // 保存或更新个人信息
    submitProductForm() {
      // 将时间转为时间戳{{Date.parse(productForm.birth)}}
      this.productForm.birth = Date.parse(this.productForm.birth);
      // console.log(this.productForm.birth);
      // this.$refs[formName] 根据我们设置的表单的ref的名称 去匹配到对应的表单
      this.$refs["productForm"].validate((valid) => {
        if (valid) {
          alert("submit!");
          // console.log(this.productForm);
        } else {
          return false;
        }
      });
      // console.log(this.productForm);
      // 发送请求
      post("/app/user/saveOrUpdate", this.productForm).then((res) => {
        // console.log(res);
        // 判断状态码
        if (res.status == 200) {
          this.$notify({
            title: "成功",
            message: res.message,
            type: "success",
          });
          this.grxx = false;
          this.$router.go();
        } else {
          this.$notify({
            title: "失败",
            message: res.message,
            type: "danger",
          });
        }
      });
    },
    // 修改个人信息点击事件
    xggrxx() {
      this.productForm = { ...this.user };
      // console.log(this.productForm);
      this.grxx = true;
    },
    // 修改头像点击事件
    xgtx1(){
      this.imageUrl="";
      this.dialogFormVisible= true;
    },
    // 修改头像
    xgtx() {
      let param = {
        ...this.user,
        userFace: this.productForm1.photo,
      };
      // console.log(param);
      post("/baseUser/saveOrUpdate", param).then((res) => {
        // console.log(res);
        // 判断状态码
        if (res.status == 200) {
          this.$notify({
            title: "成功",
            message: res.message,
            type: "success",
          });
          this.dialogFormVisible = false;
          this.$router.go();
          // this.login()
        } else {
          this.$notify({
            title: "失败",
            message: res.message,
            type: "danger",
          });
        }
      });
    },
    // 图片上传成功之后的回调
    handleAvatarSuccess(res, file) {
      // 生成一个图片的本地路径 在上传按钮的位置进行一个预览
      this.imageUrl = URL.createObjectURL(file.raw);
      // 表单对象中的photo字段进行赋值
      this.productForm1.photo = this.showFileURL + res.data.id;
      // console.log(this.productForm.photo);
    },
    // 图片上传之前做的处理
    beforeAvatarUpload(file) {
      const isLt3M = file.size / 1024 / 1024 < 3;
      if (!isLt3M) {
        this.$message.error("上传商品图片大小不能超过 3MB!");
      }
    },
    // 关闭模态框方法之前 要做一些处理
    handleClose() {
      this.$confirm("确认关闭？")
        // 确认按钮事件
        .then((_) => {
          // 清空表单的数据 和 表单验证的信息
          this.$refs["productForm"].resetFields();
          this.grxx = false;
          done();
        })
        // 取消按钮事件
        .catch((_) => {});
    },
    exit() {
      this.$router.push("/Login");
    },
  },
  // 计算属性
  computed: {
    ...mapState("user", ["user"]),
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<!--使用了scoped属性之后，父组件的style样式将不会渗透到子组件中，-->
<!--然而子组件的根节点元素会同时被设置了scoped的父css样式和设置了scoped的子css样式影响，-->
<!--这么设计的目的是父组件可以对子组件根元素进行布局。-->
<style scoped>
.demo {
  text-align: center;
}
.demo1 img {
  border-radius: 50%;
  width: 200px;
  height: 200px;
  position: relative;
  margin: 0;
  padding: 0;
  /* left: 40%; */
}
*:before {
  left: auto;
}
.avatar-uploader-icon {
  border: 1px dashed #d9d9d9;
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
  left: 50px;
}

.el-footer {
  background-color: #b3c0d1;
  /* background-image: linear-gradient(to right, #7579ff, #bf73ff); */
  color: #333;
  text-align: center;
  line-height: 60px;
}
.el-main {
  background-color: #e9eef3;
  color: #333;
  position: relative;
  /* display: flex; */
  /* font-size: 100px; */
  /* text-align: center; */
  height: 300px;
}

.main1 {
  left: 400px;
  position: absolute;
  float: left;
  /* background-color: aqua; */
}
.main2 {
  left: 900px;
  position: absolute;
  /* background-color: aquamarine; */
  float: left;
}
.main3 {
  position: absolute;
  top: 210px;
  left: 47%;
  /* text-align: center; */
  /* font-size: 100px; */
}
.avatar-uploader{
  width: 178px;
}
.el-form-item__content{
  width: 300px;
}
</style>
